<template>
	<view class="comment-limt-container" v-if="!isShowAllComment">
		<view class="comment-title">精简评论</view>
		<block v-for="(item, index) in commentList.slice(0, 2)" :key="index">
			<!-- item 项组件 -->
			<article-comment-item :data="item.info" />
		</block>
		<view class="show-more" @click="isShowAllComment = true">查看更多评论</view>
	</view>
	<view class="comment-all-container" v-else>
		<!-- 1. 通过 mescroll-body 包裹列表，指定 ref 为 么scrollRef，监听 @init，@down，@up 事件 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="{use: false }"
			:up="{textNoMore: '-- 我也是有底线的！ --'}">
			<view class="comment-title">全部评论</view>
			<block v-for="(item, index) in commentList" :key="index">
				<!-- item 项组件 -->
				<article-comment-item :data="item.info"></article-comment-item>
			</block>
		</mescroll-body>
	</view>
</template>


<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import {
		getArticleCommentList
	} from 'api/article';
	export default {
		mixins: [MescrollMixin],
		name: 'article-comment-list',
		props: {
			// 文章 ID
			articleId: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				// 当前页数
				page: 1,
				// 每页评论数
				pageSize: 5,
				// 评论列表
				commentList: [],
				isShowAllComment: false,
				mescroll: null,
				// 评论总数
				commentListTotal: 0,
			};
		},
		created() {
			this.loadCommentList();
		},
		methods: {
			/**
			 * 为 comment 增加一个评论
			 */
			addCommentList(data) {
				this.commentList.unshift(data);
			},
			/**
			 * 获取评论列表
			 */
			async loadCommentList() {
				const {
					data: res
				} = await getArticleCommentList({
					articleId: this.articleId,
					page: this.page,
					size: this.pageSize
				});

				this.commentListTotal = res.count

				if (this.page === 1) {
					this.commentList = res.list;
				} else {
					this.commentList = [...this.commentList, ...res.list];
				}
			},
			async mescrollInit() {
				await this.loadCommentList();
				this.isInit = false;
				this.getMescroll().endSuccess();
				this.mescroll.endBySize(this.commentList.length, this.commentListTotal);
			},
			async upCallback() {
				if (this.isInit) return;
				this.page += 1;
				await this.loadCommentList();
				this.getMescroll().endSuccess();
				this.mescroll.endBySize(this.commentList.length, this.commentListTotal);
			},
			getMescroll() {
				if (!this.mescroll) {
					this.mescroll = this.$refs.mescrollRef.mescroll;
				}
				return this.mescroll;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.comment-title {
		font-weight: bold;
		color: $uni-text-color-title;
		font-size: $uni-font-size-lg;
		margin: $uni-spacing-col-lg 0;
	}

	.comment-limt-container {
		.show-more {
			margin: $uni-spacing-col-lg;
			text-align: center;
			color: $uni-text-color-more;
			font-size: $uni-font-size-base;
		}
	}
</style>
